<template>
  <div class="image-preview">
    <el-image
      :style="`width: ${imgStyle}; height: ${imgStyle}`"
      :src="imgUrlList[0]"
      :preview-src-list="imgUrlList"
    >
    </el-image>
    <i
      class="closed-btn el-icon-error"
      @click.stop="$emit('imageClosedHandle')"
    ></i>
  </div>
</template>

<script>
export default {
  name: "WebImgpreview",

  props: {
    imgUrlList: {
      type: Array,
      default: () => [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
    },
    imgStyle: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.image-preview {
  position: relative;
  .el-icon-error {
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    line-height: 20px;
  }
  .el-icon-error {
    font-size: 20px;
    color: #e03535;
    transition: 0.3s all ease-in-out;
    &:hover {
      color: #cc5555;
    }
  }
}
</style>
